<template>
  <div class="layout-container">

    <div class=" " style="padding: 10px">
      <el-form
          :model="form"
           style="max-width: 660px"
           label-position="left"
           label-width="120px"
           :rules = "rules"
      >
      <el-tabs
          v-model="activeName"
          value="first"
          type="card"
          class="demo-tabs"
      >
        <el-tab-pane label="拼多多" name="first">

            <el-form-item size="medium"  label="pid" prop="pdd_pid" required
               :rules=" [{ required: true, message: 'pid必填', trigger: 'blur' },]"
            >
              <el-input  v-model="form.pdd_pid" placeholder="请填写pid" clearable />
            </el-form-item>
            <el-form-item size="medium"  label="clientId" prop="pdd_clientId" required
               :rules=" [{ required: true, message: 'clientId必填', trigger: 'blur' },]"
            >
              <el-input  v-model="form.pdd_clientId" placeholder="请填写clientId" clearable />
            </el-form-item>
            <el-form-item size="medium"  label="clientSecret"
               :rules=" [{ required: true, message: 'clientSecret必填', trigger: 'blur' },]"
            >
              <el-input  v-model="form.pdd_clientSecret" placeholder="请填写clientSecret" clearable />
            </el-form-item>
            <el-form-item size="medium"  label="accessToken"
               :rules=" [{ required: false, message: 'accessToken必填', trigger: 'blur' },]"
            >
              <el-input  v-model="form.pdd_accessToken" placeholder="请填写accessToken" clearable />
            </el-form-item>
            <el-form-item size="medium"  label="refresh_token"
               :rules=" [{ required: false, message: 'refresh_token必填', trigger: 'blur' },]"
            >
              <el-input  v-model="form.pdd_refresh_token" placeholder="请填写accessToken" clearable />
            </el-form-item>



        </el-tab-pane>
        <el-tab-pane label="大淘客" name="second">

            <el-form-item size="medium"  label="pid"
                          :rules=" [{ required: true, message: 'pid必填', trigger: 'blur' },]"
            >
              <el-input  v-model="form.dtk_pid" placeholder="请填写pid" clearable />
            </el-form-item>
            <el-form-item size="medium"  label="appkey"
                          :rules=" [{ required: true, message: 'appkey必填', trigger: 'blur' },]"
            >
              <el-input  v-model="form.dtk_appkey" placeholder="请填写appkey"  clearable/>
            </el-form-item>
            <el-form-item size="medium"  label="appsecret"
                          :rules=" [{ required: true, message: 'appsecret必填', trigger: 'blur' },]"
            >
              <el-input  v-model="form.dtk_appsecret" placeholder="请填写appsecret" clearable />
            </el-form-item>
            <el-form-item size="medium"  label="邀请码"
                          :rules=" [{ required: true, message: '邀请码', trigger: 'blur' },]"
            >
              <el-input  v-model="form.dtk_inviterCode" placeholder="请填写邀请码" clearable />
            </el-form-item>

            <el-form-item size="medium"  label="京东授权PID"
                          :rules=" [{ required: false, message: '京东授权PID必填', trigger: 'blur' },]"
            >
              <el-input  v-model="form.dtk_jd_pid" placeholder="请填写京东授权PID" clearable />
            </el-form-item>
            <el-form-item size="medium"  label="京东联盟ID"
                          :rules=" [{ required: false, message: '京东联盟ID必填', trigger: 'blur' },]"
            >
              <el-input  v-model="form.dtk_jd_unionId" placeholder="请填写京东联盟ID" clearable />
            </el-form-item>

          <el-form-item size="medium"  label="拼多多授权PID"
                          :rules=" [{ required: false, message: '拼多多授权PID必填', trigger: 'blur' },]"
            >
              <el-input  v-model="form.dtk_pdd_pid" placeholder="请填写拼多多授权大淘客的PID" clearable />
            </el-form-item>




        </el-tab-pane>
        <el-tab-pane label="好单库" name="third">

            <el-form-item size="medium"  label="apikey"
                          :rules=" [{ required: true, message: 'apikey必填', trigger: 'blur' },]"
            >
              <el-input  v-model="form.haodanku_apikey" placeholder="请填写apikey" clearable />
            </el-form-item>

        </el-tab-pane>

      </el-tabs>
      <el-form-item  size="medium">
        <el-button type="primary" @click="saveData()">保存</el-button>
      </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref, reactive } from 'vue'
import { onMounted} from 'vue'
import {useRouter, useRoute} from 'vue-router'
import req from '@/utils/system/req'
import { ElMessage,ElMessageBox  } from 'element-plus'
export default defineComponent({
  name: '系统配置',
  components: {

  },

  props:[],
  setup(props) {
    const router = useRouter();
    onMounted(() => {
      if (router.currentRoute.value.query.hasOwnProperty('id')){
        getData(router.currentRoute.value.query.id)
      }
    })

    let form = ref({
      pdd_pid: '',
      pdd_clientId: "",
      pdd_clientSecret: "",
      pdd_accessToken: "",
      pdd_refresh_token: "",
      dtk_pid: "",
      dtk_appkey: "",
      dtk_appsecret: "",
      dtk_inviterCode: "",
      dtk_jd_pid: "",
      dtk_jd_unionId: "",
      haodanku_apikey: ""
    })

    const loading = ref(true)

    const activeName = ref('first')

    const getData=()=>{
      req({
        url: '/setting/get_data',
        method: 'get',
        params:{}
      })
          .then(res => {
            if (res.code==0){
              form.value = res.data
            }
          })
          .catch(error => {
            loading.value = false

            console.log(error)
          })
          .finally(() => {
            loading.value = false
          })
    }

    const saveData=()=>{
      ElMessageBox.confirm(
          '这是要修改配置哦，是否继续?',
          '操作提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
      )
          .then(() => {
            req({
              url: '/setting/save_data',
              method: 'post',
              data:form.value
            })
                .then(res => {

                  ElMessage({
                    message: res.msg,
                    grouping: true,
                    duration: res.code==0?1000:3000,
                    type: res.code==0? 'success':'error',
                  })
                })
                .catch(error => {
                  loading.value = false

                  console.log(error)
                })
                .finally(() => {
                  loading.value = false
                })
          })
          .catch(() => {

          })

    }
    getData()
    return {
      form,
      getData,
      saveData,
      activeName
    }
  }
})
</script>

<style lang="scss" scoped>

</style>